<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <!-- 变量声明 -->

    <div id="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <!-- 点击.box alert相应下标 -->
    <script>
        var box = document.getElementsByClassName("box");
        for (let i = 0; i < box.length; i++) {
            box[i].onclick = function() {
                alert(i)
            }
        } {
            let girl = "班长"
        }
        let yuzong = "没我帅"; {
            let girl = "班长";

            function fn() {
                console.log(girl);
            }
            fn()
        }

        /*
        1、let拥有块级作用域
        2、let不存在变量的提前声明
        3、let不能重复声明
        4、let虽然是块级元素作用域但不影响作用域链
        */
        var box = document.getElementsByClassName("box");
        for (let i = 0; i < box.length; i++) {
            box[i].onclick = function() {
                alert(i)
            }
        } {
            let girl = "班长"
        }
        let yuzong = "没我帅"; {
            let girl = "班长"

            function fn() {
                console.log(girl);
            }
        }

        /*
        1、let拥有块级作用域
        2、let不存在变量的提前声明
        3、let不能重复声明
        4、let虽然是块级元素作用域但不影响作用域链
        */
        var box = document.getElementsByClassName("box");
        for (let i = 0; i < box.length; i++) {
            box[i].onclick = function() {
                alert(i)
            }
        } {
            let girl = "班长"
        }
        let yuzong = "没我帅"; {
            let girl = "班长"

            function fn() {
                console.log(girl);
            }
        }



        // 常量声明

        /*
        const 常量 （值不能被修改的变量才叫做常量）
        const 潜规则  声明形式除了声明的类型为函数（fn）外  必须大写
        const 不能被修改 ----可以修改对象里面或者数组里面的值
        const 也是拥有块级作用域 
        */
        const SCHOOL = "KW06"; {
            const BOY = "赵四"
        }
        const LIUNENG = ["刘能", "男人", "40岁"];
        LIUNENG.push("丑");
        console.log(LIUNENG);

        /*
        const 常量 （值不能被修改的变量才叫做常量）
        const 潜规则  声明形式除了声明的类型为函数（fn）外  必须大写
        const 不能被修改 ----可以修改对象里面或者数组里面的值
        const 也是拥有块级作用域 
        */
        const SCHOOL = "KW06"; {
            const BOY = "赵四"
        }
        const LIUNENG = ["刘能", "男人", "40岁"];
        LIUNENG.push("丑");
        console.log(LIUNENG);

        /*
        const 常量 （值不能被修改的变量才叫做常量）
        const 潜规则  声明形式除了声明的类型为函数（fn）外  必须大写
        const 不能被修改 ----可以修改对象里面或者数组里面的值
        const 也是拥有块级作用域 
        */
        const SCHOOL = "KW06"; {
            const BOY = "赵四"
        }
        const LIUNENG = ["刘能", "男人", "40岁"];
        LIUNENG.push("丑");
        console.log(LIUNENG);


        // 函数的默认参数

        function laojiang(a, b) {
            console.log(a + b);
        }
        laojiang(1)

        function laojiang(a, b = 1) {
            console.log(a + b);
        }
        laojiang(1)




        function laojiang(a, b) {
            console.log(a + b);
        }
        laojiang(1)

        function laojiang(a, b = 1) {
            console.log(a + b);
        }
        laojiang(1)




        function laojiang(a, b) {
            console.log(a + b);
        }
        laojiang(1)

        function laojiang(a, b = 1) {
            console.log(a + b);
        }
        laojiang(1)


        // 简化对象写法

        let name = "班长";
        let change = function() {
            console.log("好看");
        }
        const SCHOOLL = {
            name,
            change
        };
        console.log(SCHOOLL);


        let name = "班长";
        let change = function() {
            console.log("好看");
        }
        const SCHOOLL = {
            name,
            change
        };
        console.log(SCHOOLL);


        let name = "班长";
        let change = function() {
            console.log("好看");
        }
        const SCHOOLL = {
            name,
            change
        };
        console.log(SCHOOLL);


        // 箭头函数


        /*
        箭头函数开始的函数作用域的this指向那个某一个位置对象后就不会改变当前的this
        箭头函数不能作为构造函数实例化对象
        箭头函数参数只有一个的话可以省略 入参左右的括号
        箭头函数参数里面只有一句话可以省略大括号
        （如果一句话含有return 那么return也省略）
        */

        const SCH = {
            name: "渣男培训学校"
        }
        window.name = "123";
        console.log(this);

        function getName() {
            console.log(this.name);
        }
        getName()
        let getName2 = () => {
            console.log(this.name);
        }
        getName2()
        getName.call(SCH)
        getName2.call(SCH)
        let fn = q => q + q;
        console.log(fn(3));


        /*
        箭头函数开始的函数作用域的this指向那个某一个位置对象后就不会改变当前的this
        箭头函数不能作为构造函数实例化对象
        箭头函数参数只有一个的话可以省略 入参左右的括号
        箭头函数参数里面只有一句话可以省略大括号
        （如果一句话含有return 那么return也省略）
        */

        const SCH = {
            name: "渣男培训学校"
        }
        window.name = "123";
        console.log(this);

        function getName() {
            console.log(this.name);
        }
        getName()
        let getName2 = () => {
            console.log(this.name);
        }
        getName2()
        getName.call(SCH)
        getName2.call(SCH)
        let fn = q => q + q;
        console.log(fn(3));

        /*
        箭头函数开始的函数作用域的this指向那个某一个位置对象后就不会改变当前的this
        箭头函数不能作为构造函数实例化对象
        箭头函数参数只有一个的话可以省略 入参左右的括号
        箭头函数参数里面只有一句话可以省略大括号
        （如果一句话含有return 那么return也省略）
        */

        const SCH = {
            name: "渣男培训学校"
        }
        window.name = "123";
        console.log(this);

        function getName() {
            console.log(this.name);
        }
        getName()
        let getName2 = () => {
            console.log(this.name);
        }
        getName2()
        getName.call(SCH)
        getName2.call(SCH)
        let fn = q => q + q;
        console.log(fn(3));





        // 解构

        const DUIXIANG = ["蒋富涛", "有钱", "有老婆"];
        //数组解构给变量
        let [a, b, c] = DUIXIANG;
        console.log(a);
        console.log(b);
        console.log(c);
        //对象解构给变量
        const ZHANG = {
            name: "张明飞",
            age: "666",
            kanren: function() {
                console.log("砍人");
            }
        }
        let {
            name,
            age,
            kanren
        } = ZHANG;
        console.log(name);
        console.log(age);
        console.log(kanren);
        kanren()

        const DUIXIANG = ["蒋富涛", "有钱", "有老婆"];
        //数组解构给变量
        let [a, b, c] = DUIXIANG;
        console.log(a);
        console.log(b);
        console.log(c);
        //对象解构给变量
        const ZHANG = {
            name: "张明飞",
            age: "666",
            kanren: function() {
                console.log("砍人");
            }
        }
        let {
            name,
            age,
            kanren
        } = ZHANG;
        console.log(name);
        console.log(age);
        console.log(kanren);
        kanren()


        const DUIXIANG = ["蒋富涛", "有钱", "有老婆"];
        //数组解构给变量
        let [a, b, c] = DUIXIANG;
        console.log(a);
        console.log(b);
        console.log(c);
        //对象解构给变量
        const ZHANG = {
            name: "张明飞",
            age: "666",
            kanren: function() {
                console.log("砍人");
            }
        }
        let {
            name,
            age,
            kanren
        } = ZHANG;
        console.log(name);
        console.log(age);
        console.log(kanren);
        kanren()
    </script>


    <!-- 扩展运算符 -->


    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <!--   ... 运算符  将数组转为【参数序列】 -->
    <script>
        const BANZHANG = ["1", "2"];
        console.log(...BANZHANG);
        //应用场景
        const A = ["1", "2"];
        const B = ["3", "4"];
        let c = [...A, ...B];
        console.log(c);
        //深拷贝
        const D = [...A];
        D[0] = "5";
        console.log(A);
        console.log(D);
        //将DOM的伪数组变成真正意义上的数组
        let divs = document.getElementsByTagName("div");
        console.log(divs)
        const divArr = [...divs];
        console.log(divArr);
    </script>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <!--   ... 运算符  将数组转为【参数序列】 -->
    <script>
        const BANZHANG = ["1", "2"];
        console.log(...BANZHANG);
        //应用场景
        const A = ["1", "2"];
        const B = ["3", "4"];
        let c = [...A, ...B];
        console.log(c);
        //深拷贝
        const D = [...A];
        D[0] = "5";
        console.log(A);
        console.log(D);
        //将DOM的伪数组变成真正意义上的数组
        let divs = document.getElementsByTagName("div");
        console.log(divs)
        const divArr = [...divs];
        console.log(divArr);
    </script>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <!--   ... 运算符  将数组转为【参数序列】 -->
    <script>
        const BANZHANG = ["1", "2"];
        console.log(...BANZHANG);
        //应用场景
        const A = ["1", "2"];
        const B = ["3", "4"];
        let c = [...A, ...B];
        console.log(c);
        //深拷贝
        const D = [...A];
        D[0] = "5";
        console.log(A);
        console.log(D);
        //将DOM的伪数组变成真正意义上的数组
        let divs = document.getElementsByTagName("div");
        console.log(divs)
        const divArr = [...divs];
        console.log(divArr);
    </script>


    <!-- 模板字符串 -->
    <script>
        let out = "金语";
        let love = `${out}爱老婆`;
        console.log(love);

        let out = "金语";
        let love = `${out}爱老婆`;
        console.log(love);

        let out = "金语";
        let love = `${out}爱老婆`;
        console.log(love);
    </script>


    <!-- objectassgin -->
    <script>
        /* 
                        object.assgin() 
                        将多个对象的属性和方法都合并到目标对象上面 
                        格式是（目标对象，后面跟着多个或者一个原对象） 
                        */

        let target = {} //目标对象
        let name1 = {
            name: "img",
            age: "123"
        }
        let name2 = {
            sex: "男"
        }
        let name3 = {
            sex: "女"
        }
        Object.assign(targer, name1, name2, name3);
        console.log(target);

        /*
        object.assgin() 
        将多个对象的属性和方法都合并到目标对象上面 
        格式是（目标对象，后面跟着多个或者一个原对象） 
        */

        let target = {} //目标对象
        let name1 = {
            name: "img",
            age: "123"
        }
        let name2 = {
            sex: "男"
        }
        let name3 = {
            sex: "女"
        }
        Object.assign(targer, name1, name2, name3);
        console.log(target);

        /* 
        object.assgin() 
        将多个对象的属性和方法都合并到目标对象上面 
        格式是（目标对象，后面跟着多个或者一个原对象） 
        */

        let target = {} //目标对象
        let name1 = {
            name: "img",
            age: "123"
        }
        let name2 = {
            sex: "男"
        }
        let name3 = {
            sex: "女"
        }
        Object.assign(targer, name1, name2, name3);
        console.log(target);
    </script>

</body>

</html>